<template>
<div
    class="item"
    v-for="item in playlists"
    :key="item.id"
    @click="navigateToSongDetail(item.id)"
>
    <el-card shadow="hover" :body-style="{ padding: '0.5rem' }">
        <div class="img">
            <img :src="getUrl(item.picUrl)" />
        </div>
        <div class="name">
            <p class="ellipsis">{{ item.title }}</p>
        </div>
    </el-card>
</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { getUrl } from '@/utils/format';
import { useRouter } from 'vue-router';
const router = useRouter();
const navigateToSongDetail = (id:number) => {
      router.push({ name: '歌单详情', params: { id } });
}
const { playlists } = defineProps(['playlists']);
</script>

<style lang="scss" scoped>
.item {
    height: 300px; // 设置卡片的固定高度
    width: 240px; // 设置卡片的固定宽度
    cursor: pointer;

    .img {
        position: relative;
        width: 100%; // 图片容器宽度为100%
        height: 100%; // 图片容器高度为70%，留下30%的空间用于标题和其他元素

        img {
            width: 220px;
            height: 220px;
            object-fit: cover; // 图片将会按比例扩大或缩小，以填充容器，可能会被剪裁
        }
    }

    .name {
        p {
            overflow: hidden; // 隐藏超出的文本
            text-overflow: ellipsis; // 使用省略号表示隐藏的文本
            white-space: nowrap; // 不折行
        }
    }
}
</style>
